<template>
  <div class="Apply_bj">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s24  Bold">
          <li @click="categoryFun(1)" :class="{ category: category === 1 }" class="flexC JustifyContentFE flex2 textC cursor">
            <p>2.3级老人周服务大于3次或</p>
            <p>4级老人周服务大于5次</p>
          </li>
        </ul>
      </div>
      <div class="flexC" style="padding:0rem 4.0625rem 2.25rem 4.0625rem;">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s20  Bold" v-if="category === 1">
          <li class="flex2 textC">序号</li>
          <li class="flex2 textC">老人姓名</li>
          <li class="flex2 textC">周均小时数</li>
          <li class="flex2 textC">评估等级</li>
        </ul>
        <div style="height: 54vh;" class="superviseList font_s18">
          <ul v-for="(item, index) in arr1" class="Inv_ulb flex colorF Bold textC" :key="'list' + index" v-if="category === 1">
            <li class="flex2 textC">{{ index+1 }}</li>
            <li class="flex2 textC">{{ item.lrxm }}</li>
            <li class="flex2 textC">{{ item.zjxss }}</li>
            <li class="flex2 textC">{{ item.pgdj }}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComLfet',

  data () {
    return {
      category: 1,
      arr1: [
        { 'sqh': '0000PY201804250030509', 'lrxm': '赵勤芳', 'zjxss': '4', 'pgdj': '3' },
        { 'sqh': '0000PY201804250031043', 'lrxm': '钟秀宝', 'zjxss': '4', 'pgdj': '2' },
        { 'sqh': '0000PY201804250031289', 'lrxm': '周桂英', 'zjxss': '4.5', 'pgdj': '3' },
        { 'sqh': '0000PY201804250032753', 'lrxm': '朱品芳', 'zjxss': '4', 'pgdj': '3' },
        { 'sqh': '0029CH101201801220002', 'lrxm': '李秀英', 'zjxss': '4', 'pgdj': '2' },
        { 'sqh': '0069CH101201801130001', 'lrxm': '戴善萍', 'zjxss': '4', 'pgdj': '2' },
        { 'sqh': '0142CH101201804020006', 'lrxm': '俞福美', 'zjxss': '3.5', 'pgdj': '3' },
        { 'sqh': '0147CH101201801190002', 'lrxm': '朱静芳', 'zjxss': '4', 'pgdj': '2' },
        { 'sqh': '0147CH101201801220004', 'lrxm': '朱柔云', 'zjxss': '5.5', 'pgdj': '3' },
        { 'sqh': '0147CH101201801220005', 'lrxm': '沈云娣', 'zjxss': '4', 'pgdj': '3' },
        { 'sqh': '0147CH101201803290008', 'lrxm': '杨秀英', 'zjxss': '4', 'pgdj': '3' },
        { 'sqh': '0147CH101201804240006', 'lrxm': '李华珍', 'zjxss': '4.5', 'pgdj': '2' },
        { 'sqh': '0149CH101201802270020', 'lrxm': '陆宝银', 'zjxss': '4', 'pgdj': '3' },
        { 'sqh': '0149CH101201804170006', 'lrxm': '颜汝挺', 'zjxss': '4.5', 'pgdj': '3' },
        { 'sqh': '0150CH101201802110002', 'lrxm': '王金妹', 'zjxss': '4', 'pgdj': '2' },
        { 'sqh': '0204CH101201805090001', 'lrxm': '董明仙', 'zjxss': '3.25', 'pgdj': '2' },
        { 'sqh': '0000PY201804250023218', 'lrxm': '谢明波', 'zjxss': '7', 'pgdj': '4' },
        { 'sqh': '0144CH101201804230015', 'lrxm': '杨存云', 'zjxss': '7.5', 'pgdj': '4' },
        { 'sqh': '0144CH101201804240011', 'lrxm': '糜春红', 'zjxss': '8', 'pgdj': '4' },
        { 'sqh': '0151CH101201802260003', 'lrxm': '李巧花', 'zjxss': '7', 'pgdj': '4' },
        { 'sqh': '0151CH101201803260004', 'lrxm': '叶凤姿', 'zjxss': '7', 'pgdj': '4' },
        { 'sqh': '0151CH101201804090005', 'lrxm': '俞华清', 'zjxss': '6', 'pgdj': '4' }
      ]
    }
  },
  methods: {
    categoryFun (index) {
      this.category = index
    }
  }
}
</script>

<style lang="scss" scoped>
.Apply_bj {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 89.375rem;
    height: 4.375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    margin: 1.285rem auto 0.825rem;
  }
  .Inv_ula {
    width: 88.99rem;
    height: 4.375rem;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
  }
  .Inv_ulb {
    font-weight: bold;
    width: 89.375rem;
    height: 3.75rem;
    overflow: hidden;
    li {
      padding: 1rem;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
